<template>
  <div class="code-wrap app-container">
    <div class="code-content">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="拉取记录" name="1"></el-tab-pane>
        <!-- <el-tab-pane label="待审核拉取" name="2"></el-tab-pane> -->
      </el-tabs>
      <div class="code-search">
        <el-form :inline="true" :model="formInline">
          <el-form-item label="能力拉取名称">
            <el-input v-model="formInline.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="引入省份">
            <el-select v-model="formInline.userName" placeholder="引入省份" style="width: 180px">
              <el-option label="重庆" value="已测试" />
              <el-option label="四川" value="待测试" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
            <!-- <el-button icon="Refresh" @click="handleReset">重置</el-button> -->
            <el-button type="primary" @click="pullsq">拉取申请</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-wrap">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <div class="child-table">
                <el-table :data="props.row.inner" size="small">
                  <el-table-column type="index" label="序号" align="center" width="80" />
                  <el-table-column label="能力编码" prop="code" />
                  <el-table-column label="能力名称" prop="name" />
                  <el-table-column label="提供单位" prop="tgdw" />
                  <!-- <el-table-column label="交付方式" prop="orgName" /> -->
                  <el-table-column prop="method" label="交付方式" show-overflow-tooltip>
                    <template #default="{ row }">
                      <el-tag>{{ row.orgName }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="能力版本号" prop="version" />
                  <el-table-column label="操作" width="100">
                    <template #default="scope">
                      <a :style="{ color: '#409eff' }" :href="'http://10.12.6.88/demo/ability/' + scope.row.id" target="_blank">详情</a>
                      <!-- <el-button link type="primary" size="small" @click="handleShow(scope.row)">详情</el-button> -->
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column type="index" label="序号" align="center" width="60" />
          <el-table-column prop="code" label="拉取单号" align="center" width="100" />
          <el-table-column prop="orgName" label="申请单位" align="center" show-overflow-tooltip />
          <el-table-column prop="use" label="申请用途" align="center" width="100" />
          <el-table-column prop="time" label="申请时间" align="center" width="150" />
          <el-table-column prop="applyUser" label="申请人" align="center" width="90" />
          <el-table-column prop="status" label="状态" align="center" width="80">
            <template #default="scope">
              <span>{{ scope.row.status ? '已审核' : '待审核' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handleDetail(scope.row)">详情</el-button>
              <el-button link type="primary" size="small" @click="handleEdit(scope.row)">拉取记录</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-wrap">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>

    <Auth v-if="isDialog" :currentRow="currentRow" :type="type" @close="closeDialog" />
    <Auths v-if="isDialogs" :currentRow="currentRow" :type="type" @close="isDialogs = false" />
    <Authss v-if="ispull" :currentRow="currentRow" :type="type" @close="ispull = false" />
    <Detail v-if="isShowDetail" :currentRow="currentRow" @close="isShowDetail = false" />
    <Details v-if="isDialogss" :currentRow="currentRow" :type="type" @close="isDialogs = false" />
  </div>
</template>
<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router'
import type { TabsPaneContext } from 'element-plus'
import to from 'await-to-js'
import Auth from './auth.vue'
import Auths from './auths.vue'
import Detail from './detail.vue'
import Details from './details.vue'
import Authss from './authss.vue'
const activeName = ref('1')
let tableData = ref([
  {
    orgName: '中国移动通信集团河北有限公司',
    code: '100100001',
    time: '2020/9/1 13:44:21',
    applyUser: '叶静宜',
    status: 0,
    use: '能力使用',
    inner: [
      {
        code: 'A00100200007',
        name: 'PCC策略管理',
        orgName: 'API',
        ssd: '重庆',
        tgdw: '中移物联网公司',
        version: 'API_2.25_java',
        id: '39d0899ff09243e39b4f3f8ab4ba91f7'
      },
      {
        code: 'A00100200008',
        name: '物联卡定位',
        orgName: 'SDK',
        ssd: '重庆',
        tgdw: '中移物联网公司',
        version: 'API_2.26_java',
        id: 'd9a326e47a86454f99a662e4b3b6cf18'
      },
      {
        code: 'A00100200009',
        name: 'OneNET-Core',
        orgName: '私有化部署',
        ssd: '重庆',
        tgdw: '中移物联网公司',
        version: 'API_2.27_java',
        id: '934dbb1c56fe4e2a9e24a7c26e47dfb7'
      },
      {
        code: 'A00100200011',
        name: '车辆通行能力',
        orgName: 'H5',
        ssd: '重庆',
        tgdw: '中国移动通信集团河北有限公司',
        version: 'API_2.29_java',
        id: 'b39a1266bf4e492ca7178e6bd997e2ab'
      },
      {
        code: 'A00100200018',
        name: '视频监控能力',
        orgName: 'API',
        ssd: '重庆',
        tgdw: '中国移动通信集团河北有限公司',
        version: 'API_2.36_java',
        id: 'c498d317d0b147099e9cf0ec6539afdd'
      }
    ]
  },
  {
    orgName: '中国移动通信集团河北有限公司',
    code: '100100002',
    time: '2020/9/1 13:44:21',
    applyUser: '叶静宜',
    status: 1,
    use: '能力使用',
    inner: [
      {
        code: 'A00100200007',
        name: 'PCC策略管理',
        orgName: 'API',
        ssd: '重庆',
        tgdw: '中移物联网公司',
        version: 'API_2.25_java',
        id: '39d0899ff09243e39b4f3f8ab4ba91f7'
      },
      {
        code: 'A00100200008',
        name: '物联卡定位',
        orgName: 'SDK',
        ssd: '重庆',
        tgdw: '中移物联网公司',
        version: 'API_2.26_java',
        id: 'd9a326e47a86454f99a662e4b3b6cf18'
      },
      {
        code: 'A00100200009',
        name: 'OneNET-Core',
        orgName: '私有化部署',
        ssd: '重庆',
        tgdw: '中移物联网公司',
        version: 'API_2.27_java',
        id: '934dbb1c56fe4e2a9e24a7c26e47dfb7'
      },
      {
        code: 'A00100200011',
        name: '车辆通行能力',
        orgName: 'H5',
        ssd: '重庆',
        tgdw: '中国移动通信集团河北有限公司',
        version: 'API_2.29_java',
        id: 'b39a1266bf4e492ca7178e6bd997e2ab'
      },
      {
        code: 'A00100200018',
        name: '视频监控能力',
        orgName: 'API',
        ssd: '重庆',
        tgdw: '中国移动通信集团河北有限公司',
        version: 'API_2.36_java',
        id: 'c498d317d0b147099e9cf0ec6539afdd'
      }
    ]
  },
  {
    orgName: '中国移动通信集团河北有限公司',
    code: '100100003',
    time: '2020/9/1 13:44:21',
    applyUser: '叶静宜',
    status: 0,
    use: '能力使用',
    inner: [
      {
        code: 'A00100200007',
        name: 'PCC策略管理',
        orgName: 'API',
        ssd: '重庆',
        tgdw: '中移物联网公司',
        version: 'API_2.25_java',
        id: '39d0899ff09243e39b4f3f8ab4ba91f7'
      },
      {
        code: 'A00100200008',
        name: '物联卡定位',
        orgName: 'SDK',
        ssd: '重庆',
        tgdw: '中移物联网公司',
        version: 'API_2.26_java',
        id: 'd9a326e47a86454f99a662e4b3b6cf18'
      },
      {
        code: 'A00100200009',
        name: 'OneNET-Core',
        orgName: '私有化部署',
        ssd: '重庆',
        tgdw: '中移物联网公司',
        version: 'API_2.27_java',
        id: '934dbb1c56fe4e2a9e24a7c26e47dfb7'
      },
      {
        code: 'A00100200011',
        name: '车辆通行能力',
        orgName: 'H5',
        ssd: '重庆',
        tgdw: '中国移动通信集团河北有限公司',
        version: 'API_2.29_java',
        id: 'b39a1266bf4e492ca7178e6bd997e2ab'
      },
      {
        code: 'A00100200018',
        name: '视频监控能力',
        orgName: 'API',
        ssd: '重庆',
        tgdw: '中国移动通信集团河北有限公司',
        version: 'API_2.36_java',
        id: 'c498d317d0b147099e9cf0ec6539afdd'
      }
    ]
  },
  {
    orgName: '中国移动通信集团河北有限公司',
    code: '100100004',
    time: '2020/9/1 13:44:21',
    applyUser: '叶静宜',
    status: 1,
    use: '能力使用',
    inner: [
      {
        code: 'A00100200007',
        name: 'PCC策略管理',
        orgName: 'API',
        ssd: '重庆',
        tgdw: '中移物联网公司',
        version: 'API_2.25_java',
        id: '39d0899ff09243e39b4f3f8ab4ba91f7'
      },
      {
        code: 'A00100200008',
        name: '物联卡定位',
        orgName: 'SDK',
        ssd: '重庆',
        tgdw: '中移物联网公司',
        version: 'API_2.26_java',
        id: 'd9a326e47a86454f99a662e4b3b6cf18'
      },
      {
        code: 'A00100200009',
        name: 'OneNET-Core',
        orgName: '私有化部署',
        ssd: '重庆',
        tgdw: '中移物联网公司',
        version: 'API_2.27_java',
        id: '934dbb1c56fe4e2a9e24a7c26e47dfb7'
      },
      {
        code: 'A00100200011',
        name: '车辆通行能力',
        orgName: 'H5',
        ssd: '重庆',
        tgdw: '中国移动通信集团河北有限公司',
        version: 'API_2.29_java',
        id: 'b39a1266bf4e492ca7178e6bd997e2ab'
      },
      {
        code: 'A00100200018',
        name: '视频监控能力',
        orgName: 'API',
        ssd: '重庆',
        tgdw: '中国移动通信集团河北有限公司',
        version: 'API_2.36_java',
        id: 'c498d317d0b147099e9cf0ec6539afdd'
      }
    ]
  },
  {
    orgName: '中国移动通信集团河北有限公司',
    code: '100100005',
    time: '2020/9/1 13:44:21',
    applyUser: '叶静宜',
    status: 0,
    use: '能力使用',
    inner: [
      {
        code: 'A00100200007',
        name: 'PCC策略管理',
        orgName: 'API',
        ssd: '重庆',
        tgdw: '中移物联网公司',
        version: 'API_2.25_java',
        id: '39d0899ff09243e39b4f3f8ab4ba91f7'
      },
      {
        code: 'A00100200008',
        name: '物联卡定位',
        orgName: 'SDK',
        ssd: '重庆',
        tgdw: '中移物联网公司',
        version: 'API_2.26_java',
        id: 'd9a326e47a86454f99a662e4b3b6cf18'
      },
      {
        code: 'A00100200009',
        name: 'OneNET-Core',
        orgName: '私有化部署',
        ssd: '重庆',
        tgdw: '中移物联网公司',
        version: 'API_2.27_java',
        id: '934dbb1c56fe4e2a9e24a7c26e47dfb7'
      },
      {
        code: 'A00100200011',
        name: '车辆通行能力',
        orgName: 'H5',
        ssd: '重庆',
        tgdw: '中国移动通信集团河北有限公司',
        version: 'API_2.29_java',
        id: 'b39a1266bf4e492ca7178e6bd997e2ab'
      },
      {
        code: 'A00100200018',
        name: '视频监控能力',
        orgName: 'API',
        ssd: '重庆',
        tgdw: '中国移动通信集团河北有限公司',
        version: 'API_2.36_java',
        id: 'c498d317d0b147099e9cf0ec6539afdd'
      }
    ]
  }
])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(5)
const isDialogss = ref(false)
const handleShow = (row) => {
  currentRow.value = row
  isDialogss.value = true
}
let formInline = ref({
  name: '',
  userName: ''
})
const isDialog = ref(false)
const isDialogs = ref(false)
const ispull = ref(false)
const isShowDetail = ref(false)
const currentRow = ref({})
const type = ref('edit')

onMounted(() => {
  const router = useRouter()
  if (router.currentRoute.value.query.abilityId) {
    ispull.value = true
  }
})
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const handleSearch = () => {}

const handleReset = () => {
  formInline.value = {
    name: '',
    userName: ''
  }
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const handleDetail = (row: any) => {
  currentRow.value = row
  isShowDetail.value = true
}
const pullsq = () => {
  ispull.value = true
}
const handleEdit = (row: any) => {
  currentRow.value = row
  isDialogs.value = true
}

const handleDelete = async (row: any) => {
  const [confirm] = await to(
    ElMessageBox.confirm(`是否删除该提供方?`, '温馨提示', {
      type: 'warning',
      draggable: true
    })
  )
  if (confirm) return
  ElMessage.success('操作成功')
}

const closeDialog = (search: Boolean) => {
  isDialog.value = false
  // search && searchTable()
}

const fetchList = () => {}
</script>
<style lang="scss" scoped>
.code-wrap {
  // padding: 20px;
  .code-content {
    background-color: #ffffff;
    padding: 0 6px;
    margin-top: -6px;
    .code-search {
    }
    .table-wrap {
      .child-table {
        padding: 10px 20px;
      }
    }
    .pagination-wrap {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
